﻿@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@namespace MudBlazor.Docs.Examples
@inject HttpClient httpClient

<MudDataGrid @ref="_elementGrid" T="Element" Items="@_elements" ReadOnly="@_readOnly" 
    EditMode="@(_isCellEditMode ? DataGridEditMode.Cell : DataGridEditMode.Form)"
    StartedEditingItem="@StartedEditingItem" CanceledEditingItem="@CanceledEditingItem" CommittedItemChanges="@CommittedItemChanges"
    Bordered="true" Dense="true" EditTrigger="@(_editTriggerRowClick ? DataGridEditTrigger.OnRowClick : DataGridEditTrigger.Manual)">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
        <MudButtonGroup Class="ma-0 pa-0" Color="Color.Success" Variant="Variant.Filled">
            <MudButton OnClick="NewItemAsync">
                Add New Item
            </MudButton>
        </MudButtonGroup>
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" Editable="false" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" />
        <PropertyColumn Property="x => x.Position">
            <EditTemplate>
                <MudSelect @bind-Value="context.Item.Position" Required RequiredError="You must select a Position!!!" Margin="@Margin.Dense">
                    <MudSelectItem Value="0">zero</MudSelectItem>
                    <MudSelectItem Value="1">one</MudSelectItem>
                    <MudSelectItem Value="17">seventeen</MudSelectItem>
                </MudSelect>
            </EditTemplate>
        </PropertyColumn>
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
        <TemplateColumn Hidden="@_readOnly" CellClass="d-flex justify-between">
            <CellTemplate>
                    @if (!_isCellEditMode && !_editTriggerRowClick)
                    {
                        <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
                    }
                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Delete" OnClick="@(() => DeleteItem(context.Item))" />
            </CellTemplate>
            <EditTemplate>
                    @if (!_isCellEditMode && !_editTriggerRowClick)
                    {
                        <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
                    }
                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Delete" OnClick="@(() => DeleteItem(context.Item))" />
            </EditTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

<div class="d-flex flex-wrap mt-4">
    <MudSwitch @bind-Value="_readOnly" Color="Color.Primary">Read Only</MudSwitch>
    <div class="d-flex justify-start align-center ml-4">
        <p class="mud-typography mud-typography-body1 mud-inherit-text mr-2">Form</p>
        <MudSwitch @bind-Value="_isCellEditMode" Color="Color.Primary">Cell</MudSwitch>
    </div>
    <div class="d-flex justify-start align-center ml-4">
        <p class="mud-typography mud-typography-body1 mud-inherit-text mr-2">Manual</p>
        <MudSwitch @bind-Value="_editTriggerRowClick" Color="Color.Primary">On Row Click</MudSwitch>
    </div>
</div>

<MudExpansionPanels Style="flex:1">
    <MudExpansionPanel Text="Show Events">
        @foreach (var message in _events)
        {
            <MudText Typo="@Typo.body2">@message</MudText>
        }
        @if(_events.Count > 0) 
        {
            <div class="d-flex">
                <MudSpacer/>
                <MudButton Class="mt-3" ButtonType="ButtonType.Button" Variant="Variant.Filled" OnClick="@(() => _events.Clear())">Clear</MudButton>
            </div>
        }
    </MudExpansionPanel>
</MudExpansionPanels>

@code {
    private IEnumerable<Element> _elementMasterList = [];
    private List<Element> _elements = [];
    private bool _readOnly;
    private bool _isCellEditMode;
    private List<string> _events = new();
    private bool _editTriggerRowClick;
    private MudDataGrid<Element> _elementGrid = default!;

    protected override async Task OnInitializedAsync()
    {
        _elementMasterList = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
        _elements = _elementMasterList.Take(4).ToList();
    }

    private async Task NewItemAsync()
    {
        var elem = new Element();
        if (_isCellEditMode)
        {
            _elements.Insert(0, elem);
        }
        else
        {
            await _elementGrid.SetEditingItemAsync(elem);
        }        
    }

    private void DeleteItem(Element item)
    {
        _elements.Remove(item);
    }

    // events
    private void StartedEditingItem(Element item)
    {        
        _events.Insert(0, $"Event = StartedEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
    }

    private void CanceledEditingItem(Element item)
    {
        // update code for backing data here if needed
        _events.Insert(0, $"Event = CanceledEditingItem, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
    }

    private void CommittedItemChanges(Element item)
    {
        // update code for the backing data here
        if (item.Number == 0) // new item
        {
            bool cellMode = _elements.Remove(item); // for cell mode
            var maxMaster = _elementMasterList.Any() ? _elementMasterList.Max(x => x.Number) : 0;
            var maxElements = _elements.Any() ? _elements.Max(x => x.Number) : 0;
            item.Number = Math.Max(maxMaster, maxElements) + 1;          
            if (cellMode)
            {
                _elements.Insert(0, item);
            }
            else
            {
                _elements.Add(item);
            }            
        }   
        _events.Insert(0, $"Event = CommittedItemChanges, Data = {System.Text.Json.JsonSerializer.Serialize(item)}");
    }
}
